"use client"
import { useState } from 'react';

export default function Home() {
  const [image, setImage] = useState(null);
  const [processedImage, setProcessedImage] = useState(null);

  const handleImageChange = (e) => {
    //setImage(e.target.files[0]);
    setImage(URL.createObjectURL(e.target.files[0]))
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('image', image);

    try {
      const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/predict`, {
        method: 'POST',
        body: formData,
      });

      if (res.ok) {
        const blob = await res.blob();
        setProcessedImage(URL.createObjectURL(blob));
      } else {
        console.error('Error processing image');
      }
    } catch (error) {
      console.error('Error uploading image:', error);
    }
  };

  return (
    <div>
      <h1>Upload Image</h1>
      <form onSubmit={handleSubmit}>
        <input type="file" onChange={handleImageChange} accept="image/*" />
        <button type="submit">Upload</button>
      </form>
      <img src={image} alt="Processed" />
      {processedImage && (
        <div>
          
          <h2>Processed Image</h2>
          <img src={processedImage} alt="Processed" />
        </div>
      )}
    </div>
  );
}